<!--  -->
<template>
  <div class="box">
    <div style="width:70%">
      <el-input v-model="query.title" placeholder="请输入标题">
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
      </el-input>
      <div class="card-list">
        <a-card hoverable class="card" v-for="item in listData" :key="item.id">
          <img slot="cover" alt="example" :src="'http://127.0.0.1:8080' + item.pic" style="height:200px" />
          <a-card-meta :title="item.title" @click="link(item)">
            <template slot="description">
              {{ item.jianjie }}
            </template>
          </a-card-meta>
        </a-card>
      </div>
      <a-pagination style="text-align:center" v-model="query.pageNum" :total="total" show-less-items @change="change" />
    </div>

    <div style="width:20%">
      <hot-news></hot-news>
    </div>
  </div>
</template>

<script>
import HotNews from './hotNew/HotNews.vue'
import { list } from '@/api/news/news'

export default {
  components: { HotNews },
  data() {
    return {
      listData: [],
      pageSize: 5,
      total: 0,
      // titleName: "",
      query: {
        title: '',
        pageNum: 1,
        pageSize: 5
      }
    }
  },
  mounted() {
    this.fetch(this.query)
  },
  methods: {
    link(item) {
      // console.log(item)
      location.href = item.net
    },
    change(page) {
      this.fetch(this.query)
    },
    fetch(param) {
      list(param).then(res => {
        console.log(res.rows)
        this.listData = res.rows
        this.total = res.total
      })
    },
    search() {
      this.fetch(this.query)
    }
  }
}
</script>

<style scoped>
.card {
  width: 240px;
  /* height: ; */
  margin: 20px;
}
.card-list {
  width: 80%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  flex-wrap: wrap;
}
.box {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.autoMid {
  display: flex;
  flex-direction: row;
  justify-content: center;
}
</style>
